<template>
	<view class="flex-col section_3" @click="navTo('', { id: info.id })">
		<view class="flex-row justify-between group_6">
			<text class="font_5">订单{{info.orderno}}</text>
			<text class="font_3">{{showStatusTxt(info.status)}}</text>
		</view>
		<view class="flex-row justify-between items-center group_7">
			<view class="flex-row space-x-22">
				<image class="image_5" mode="aspectFill" :src="info.car_image" />
				<view class="flex-col items-start group_8 space-y-17">
					<text class="font_6">{{info.car_shortname}}</text>
					<text class="car_no">{{info.car_chepai}}</text>
					<text class="font_7 text_5">{{info.car_infoname}}</text>
				</view>
			</view>
			<!-- 
			<view class="flex-row items-center section_4 space-x-9">
				<text class="font_1">车辆详情</text>
				<image
					class="shrink-0 image_6"
					src="/static/msg-r.png"
				/>
			</view>
			-->
		</view>
		<view class="flex-row items-center group_9 space-x-10">
			<!-- <image
				class="shrink-0 image_7"
				src="/static/car-detail-dot.png"
			/> -->
			<view class="flex-col flex-auto space-y-20">
				<view class=" line-wrap">
					<text class="dot get"></text>
					<text class="font_1 city">{{info.get_city_name}}</text>
					<text class="font_1 text_6">{{info.get_address}}</text>
					<text class="font_1 text_6">{{showDate(info.starttime)}}</text>
				</view>
				<view class="space-x-14 line-wrap">
					<text class="dot back"></text>
					<text class="font_1 city">{{info.back_city_name}}</text>
					<text class="font_1 text_6">{{info.back_address}}</text>
					<text class="font_1 text_6">{{showDate(info.endtime)}}</text>
				</view>
			</view>
		</view>
		<view class="flex-row justify-end group_10 space-x-23-reverse">
			<!-- 待付款-->
			<block v-if="info.status === 0">
				<view class="flex-col justify-start items-center text-wrapper_3"
					@click.stop="navTo('/pages/order/cancel', { orderid: info.id })">
					<text class="font_7">取消订单</text>
				</view>
			</block>
			<!--已付款 待取车-->
			<block v-if="info.status === 10">
				<view class="flex-col justify-start items-center text-wrapper_3"
					@click.stop="navTo('/pages/order/cancel', { orderid: info.id })">
					<text class="font_7">取消订单</text>
				</view>
				<view class="flex-col justify-start items-center text-wrapper_4"
					@click.stop="navTo('/pages/order/msgGetcar', { orderid: info.id,car_chepai: info.car_chepai})">
					<text class="font_8 text_10">确认取车</text>
				</view>
			</block>
			<!--已取车 待还车-->
			<block v-else-if="info.status === 20">
				<view class="flex-col justify-start items-center text-wrapper_4"
					@click.stop="navTo('/pages/order/msgReturncar', { orderid: info.id})">
					<text class="font_8 text_10">资料上传</text>
				</view>
				<!-- <view class="flex-col justify-start items-center text-wrapper_4"><text class="font_8 text_10">门店指引</text></view> -->
			</block>
			<!-- 已逾期 时间不能要-->
			<block v-else-if="info.status === 200">
				<view class="flex-col justify-start items-center text-wrapper_3"
					@click.stop="navTo('/pages/order/msgReturncar', { orderid: info.id })">
					<text class="font_7">资料上传</text>
				</view>
				<view class="flex-col justify-start items-center text-wrapper_4" @click.stop="call(info.user_mobile)">
					<text class="font_8 text_10">联系客户</text>
				</view>
			</block>
			<!-- 完成 -->
			<block v-else-if="info.status === 30 && info.comment_info && info.comment_info.id">
				<view class="flex-col justify-start items-center text-wrapper_4">
					<text class="font_8 text_10">查看评价</text>
				</view>
			</block>
			<!-- 已取消 -2已付款取消-->
			<block
				v-else-if='(info.status === -1 || info.status === -2) && info.cancel_info &&  info.cancel_info.reason'>
				<view class="cancel-txt">
					取消原因：{{info.cancel_info.reason}}
				</view>
			</block>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent,
		watchEffect,
		reactive,
		toRefs,
		computed
		// watch,
		// nextTick,
		// ref,
	} from 'vue';
	import { onReachBottom, onLoad } from "@dcloudio/uni-app";
	// import { showDate, showStatusTxt } from '/js/common.js';
	// import { showDate, showStatusTxt } from '../../..';
	const orderItem = defineComponent({
		props: {
			info: {
				type: Object,
				default: () => ({})
			}
		},
		methods: {
			// showDate,
			// showStatusTxt,
		},
		setup(props : any, ctx : any) {
			const data : any = reactive({
				info: {}
			});
			watchEffect(() => {
				data.info = props.info;
			});
			onLoad(() => {
				// console.log('onLoad showStatusTxt',showStatusTxt);
			})
			const call = (phone) => {
				uni.makePhoneCall({
					phoneNumber: phone + '',
				})
			}
			return {
				...toRefs(data),
				call,
				// showDate,
				// showStatusTxt
			};
		}
	});
	export default orderItem;
</script>


<style lang="scss" scoped>
	.section_3 {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 24rpx;

		.group_6 {
			padding: 30rpx 20rpx 30rpx 25rpx;
			border-bottom: solid 2rpx #0000000f;

			.font_5 {
				font-size: 26rpx;
				font-family: PingFang;
				color: #333333;
			}

			.font_3 {
				font-size: 26rpx;
				font-family: PingFang;
				color: #256ae5;
			}
		}

		.group_7 {
			padding: 30rpx 24rpx 24rpx 35rpx;
			border-bottom: solid 2rpx #0000000f;

			.space-x-22 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 22rpx;
				}

				.image_5 {
					margin-top: 5rpx;
					width: 156rpx;
					height: 70rpx;
					border-radius: 10rpx;
				}

				.group_8 {
					margin-bottom: 4rpx;

					.font_6 {
						font-size: 32rpx;
						font-family: PingFang;
						font-weight: 700;
						color: #333333;
					}

					.font_7 {
						font-size: 24rpx;
						font-family: PingFang;
						color: #999999;
					}

					.car_no {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}

				.space-y-17 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-top: 17rpx;
					}
				}
			}

			.section_4 {
				padding: 13rpx 16rpx;
				background-color: #f5f6f8;
				border-radius: 4rpx;
				height: 49rpx;

				.image_6 {
					width: 8rpx;
					height: 15rpx;
				}
			}

			.space-x-9 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 9rpx;
				}
			}
		}

		.group_9 {
			padding: 21rpx 30rpx 32rpx;
			border-bottom: solid 2rpx #0000000f;

			.line-wrap {
				flex-wrap: wrap;
			}

			.image_7 {
				width: 12rpx;
				height: 55rpx;
				flex-shrink: 0;
			}

			.dot {
				width: 12rpx;
				height: 12rpx;
				border-radius: 12rpx;
				margin-right: 10rpx;
				flex-shrink: 0;
				display: inline-block;
				margin-top: 4rpx;

				&.get {
					background-color: #3E6FEF;
				}

				&.back {
					background-color: #38B910;
				}
			}

			.space-y-20 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 20rpx;
				}

				.text_6 {
					margin-left: 13rpx;
					// max-width: 360rpx;
					line-height: 30rpx;
				}

				.space-x-14 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 14rpx;
					}
				}
			}
		}

		.space-x-10 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-left: 10rpx;
			}
		}

		.font_1 {
			font-size: 24rpx;
			font-family: PingFang;
			color: #333333;
			word-break: break-all;
		}

		.group_10 {
			padding: 23rpx 24rpx;
			position: relative;

			.text-wrapper_3 {
				padding: 18rpx 0;
				border-radius: 32rpx;
				width: 178rpx;
				height: 66rpx;
				border: solid 1rpx #999999;

				.font_7 {
					font-size: 28rpx;
					font-family: PingFang;
					color: #333333;
				}
			}

			.text-wrapper_4 {
				padding: 18rpx 0;
				background-color: #3e6fef;
				border-radius: 32rpx;
				width: 176rpx;
				height: 64rpx;

				.font_8 {
					font-size: 28rpx;
					font-family: PingFang;
					color: #ffffff;
				}
			}

			.cancel-txt {
				width: 100%;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #256AE5;
				line-height: 38rpx;
			}
		}

		.space-x-23-reverse {

			&>view:not(:last-child),
			&>text:not(:last-child),
			&>image:not(:last-child) {
				margin-right: 23rpx;
			}
		}
	}
</style>